<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="8">
          <a-form-item field="user" label="会员账号">
            <a-input placeholder="会员账号" v-model="searchForm.user" allow-clear @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="uid" label="会员UID">
            <a-input placeholder="会员UID" v-model="searchForm.uid" allow-clear @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="type" label="类型">
            <sa-select :data="paramsData" v-model="searchForm.type" @change="refresh" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item field="date" label="时间">
            <a-range-picker v-model="searchForm.date" value-format="YYYY-MM-DD" :allow-clear="true"
              @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>
      </template>
      <template #tableBeforeButtons>
        <a-button type="primary" style="padding:0 30px" @click="handle">操作</a-button>
        <a-button type="primary" style="padding:0 30px" :loading="exportLoading" class="yellow_color" @click="exportExcel"><icon-share-external />
          导出</a-button>
      </template>
      <template #area_text="{ record }">
        <a-tag v-if="record.area == 0" color="arcoblue">{{ record.area_text }}</a-tag>
        <a-tag v-if="record.area == 1" color="gold">{{ record.area_text }}</a-tag>
      </template>
      <template #payLog="{ record }">
        <div v-if="record.payLog && record.payLog.length > 0">
          {{ record?.payLog[0]?.pay_title }} : {{ record?.payLog[0]?.pay_num }}
        </div>
      </template>
      <template #expandArea="data">
        <a-descriptions :size="size" align="center" :column="4" title="" layout="vertical" bordered
          style="margin-bottom: 30px;">
          <a-descriptions-item label="已销售礼品卡" :span="1">{{ data?.total_data?.buy_num }}</a-descriptions-item>
          <a-descriptions-item label="已兑换礼品卡" :span="1">{{ data?.total_data?.use_num }}</a-descriptions-item>
          <a-descriptions-item label="售出但未兑换礼品卡" :span="1">{{ data?.total_data?.remain_num }}</a-descriptions-item>
          <a-descriptions-item label="可用" :span="1">{{ data?.total_data?.balance }}</a-descriptions-item>
        </a-descriptions>
      </template>
    </sa-table>
    <edit-form ref="editRef" @success="refresh" />
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaTable from '@cps/sa-table/index.vue'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool';
import editForm from './edit.vue'
const exportLoading=ref(false)
import ENUMS from '@/utils/enums'
const editRef = ref()
const crudRef = ref()
const searchForm = ref({
  type: '',
  date: [],
  user: '',
  uid:'',
})
const options = reactive({
  api: memberApi.giftcard,//表格数据接口
  operationColumnWidth: 200,//操作欄
  showSearch: true,
  columnAlign: 'center',
  pageSimple: false,//是否展示操作欄有 以及工具欄 false 为都显示  true 不现实
  isTreeTable: false,//如果数据中有children 并且不想显示樹狀结構 请置false
  isExpand: false,//展開所有子樹
  singleLine: false,
  operationColumn: false
})
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: 'UID', dataIndex: 'user_id', width: 120 },
  { title: '会员账号', dataIndex: 'user_name', width: 120 },
  { title: '类型', dataIndex: 'type_text', width: 150 },
  { title: '数量', dataIndex: 'num', width: 120 },
  { title: '內容', dataIndex: 'message', width: 180 },
  { title: '支付记录', dataIndex: 'payLog', width: 180 },
  { title: '创建时间', dataIndex: 'create_time', width: 180 },
])
const initPage = async () => { }
const resetSearch = () => {
  searchForm.value.date = []
}
const handle = () => {
  editRef.value?.open()
}
const exportExcel = throttle(async () => {
  try {
    exportLoading.value = true
    const result = await tool.downloadFile('/user/admin/user_gift/export', searchForm.value,'礼品卡流水')
  } finally { 
    exportLoading.value = false
  }
}, 3000)
const refresh = async () => {
  crudRef.value?.refresh()
}
const paramsData = ref([])
const getParams = async () => {
  const { data } = await memberApi.giftcardParams()
  paramsData.value = tool.simpleTransformArray(data.type)
  console.log('paramsData', paramsData.value);
}



onMounted(async () => {
  initPage()
  refresh()
  getParams()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>